import { Component } from "react";


// 类组件的内部包含了this和生命周期，this中有状态，上下文等等，如果其中的状态发生了改变，那么render就会重新执行
// 状态改变，render和更新都会再次触发 componentDidMount是页面首次渲染完成

// 类组件
// class DemoA extends Component {
//     constructor() {  //这是最快的
//         super() // 这是调用父组件的constror，注意他的前面不能写其他代码
//         // console.log('constructor');
//         // 定义状态
//         console.log(this);
//         this.state = {
//             couter: 1
//         }
//     }
//     componentDidMount() {
//         console.log('componentDidMount');
//         this.refs.box.style.color = "red"
//     }
//     //方法
//     add() {
//         // 调用方法，改变状态，那么render就会重新执行
//         this.setState({
//             couter: this.state.couter + 1
//         })
//     }
//     render() {
//         // console.log('render');
//         let { couter } = this.state  //可以之恶杰解构出来这个数据
//         console.log(this.props);
//         return (
//             <div>
//                 <h1 ref="box">{couter}</h1>
//                 <button onClick={() => this.add()}>+1</button>
//             </div>
//         )
//     }
// }

// 函数组件  由于它没有生命周期之类的，所以想要实现功能就需要依靠hook
import { useState, useEffect, useRef } from "react"

function DemoA(props) {
    // useRef时用来获取dom元素的
    let box = useRef(null)  //这是先搞定有一个dom元素的字符，然后绑定到dom上，最后拿来使用
    let [counter, setCounter] = useState(1)  //前一个是数据，后一个是方法，useState(1)1是默认值
    // useEffect类似watcheffect 页面渲染时执行一次，然后他依赖的数据每次发生改变时也会重新执行一次
    useEffect(() => {
        console.log(111);
        box.current.style.color = 'blue'
    }, [counter])
    return (
        <div>
            <h1 ref={box}>{counter}</h1>
            <button onClick={() => setCounter(counter + 1)}>+1</button>
        </div>
    )
}

export default DemoA;